<template>
	<view class="ayi-page tab-page">
		<navigation :isBack="false" title="开将结果"></navigation>
		<view class="lotter-header">
			<view class="lotter-name" @click="menuNet()">
				{{ lotType }}
				<i class="iconfont" style="font-size: 16rpx;">&#xe619;</i>
			</view>
			<view class="lotter-time">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<text style="font-weight: normal; padding-right: 5px;">{{ date }}</text>
					<i class="iconfont">&#xe66c;</i>
				</picker>
			</view>
		</view>
		<view class="lotter-table-tit">
			<view class="lotter-t-left">{{ tabarData.cycleid }}/{{ tabarData.sdate }}</view>
			<view class="lotter-t-right">
				<block v-if="lotKey == 'lhc' || lotKey == 'qlc'">
					<text v-if="tabarData.balls" class="tit-span" :class="{ active: showStateData.balls }" @click="onSelectType('balls')">{{ tabarData.balls }}</text>
					<text v-if="tabarData.dx" class="tit-span" :class="{ active: showStateData.dx }" @click="onSelectType('dx')">{{ tabarData.dx }}</text>
					<text v-if="tabarData.ds" class="tit-span" :class="{ active: showStateData.ds }" @click="onSelectType('ds')">{{ tabarData.ds }}</text>
					<text v-if="tabarData.sum" class="tit-span" :class="{ active: showStateData.sum }" @click="onSelectType('sum')">{{ tabarData.sum }}</text>
					<text v-if="tabarData.nn" class="tit-span" :class="{ active: showStateData.nn }" @click="onSelectType('nn')">{{ tabarData.nn }}</text>
					<text v-if="tabarData.tm" class="tit-span" :class="{ active: showStateData.tm }" @click="onSelectType('tm')">{{ tabarData.tm }}</text>
				</block>
				<block v-if="lotKey != 'lhc' && lotKey != 'qlc'">
					<text
						v-if="tabarData.balls && (tempLotKey == 'pk8' || tempLotKey == 'pt8' || tempLotKey == 'pks' || tempLotKey == 'sg8' || tempLotKey == 'pkt')"
						class="tit-span"
						:class="{ active: showStateData.balls }"
						@click="onSelectType('balls')"
					>
						{{ tabarData.balls }}
					</text>
					<text
						v-if="tabarData.balls && tempLotKey != 'pk8' && tempLotKey != 'pt8' && tempLotKey != 'pks' && tempLotKey != 'sg8' && tempLotKey != 'pkt'"
						class="tit-span"
						:class="{ active: showStateData.balls }"
						@click="onSelectType('balls')"
					>
						{{ tabarData.balls }}
					</text>
					<text v-if="tabarData.dx" class="tit-span" :class="{ active: showStateData.dx }" @click="onSelectType('dx')">{{ tabarData.dx }}</text>
					<text v-if="tabarData.ds" class="tit-span" :class="{ active: showStateData.ds }" @click="onSelectType('ds')">{{ tabarData.ds }}</text>
					<text
						v-if="tabarData.sum && (tempLotKey == 'pk8' || tempLotKey == 'pt8' || tempLotKey == 'pks' || tempLotKey == 'sg8' || tempLotKey == 'pkt')"
						class="tit-span"
						:class="{ active: showStateData.sum && !showStateData.balls }"
						@click="onSelectType('sum')"
					>
						{{ tabarData.sum }}
					</text>
					<text
						v-if="tabarData.sum && tempLotKey != 'pk8' && tempLotKey != 'pt8' && tempLotKey != 'pks' && tempLotKey != 'sg8' && tempLotKey != 'pkt'"
						class="tit-span"
						:class="{ active: showStateData.sum }"
						@click="onSelectType('sum')"
					>
						{{ tabarData.sum }}
					</text>
					<text v-if="tabarData.nn" class="tit-span" :class="{ active: showStateData.nn }" @click="onSelectType('nn')">{{ tabarData.nn }}</text>
					<text v-if="tabarData.gylh" class="tit-span" :class="{ active: showStateData.gylh }" @click="onSelectType('gylh')">{{ tabarData.gylh }}</text>
				</block>
			</view>
		</view>
		<view class="lotter-table-item" v-for="item in listData" :key="item.cycleid">
			<view class="lotter-t-left">
				<view>{{ item.cycleid }}</view>
				<view>{{ item.sdate }}</view>
			</view>
			<!-- 六合彩 -->
			<view class="lotter-t-right" v-if="lotKey == 'lhc' || lotKey == 'qlc'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain lhc-qlc" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<view>
							<block v-for="(itemSon, i) in item.balls" :key="i">
								<text v-if="i == 6" class="lhc-qlc-lot-default">+</text>
								<text class="lhc-qlc-lot" :class="[`${strLink(itemSon, 'lhc-qlc-lot-')}`]">{{ itemSon }}</text>
							</block>
						</view>
						<view>
							<block v-for="(itemSon, i) in item.gylh" :key="i">
								<text v-if="i == 6" class="lhc-qlc-lot-default">&nbsp;</text>
								<text class="lhc-qlc-lot-default">{{ itemSon }}</text>
							</block>
						</view>
					</view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.sum" :key="index2" class="lhc-qlc-sum-num" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.tm" class="lottery-res-contain lottery-res-tm-contain lottery-res-contain-tm">
					<view>
						<block v-for="(itemSon, tm_i) in item.tm" :key="tm_i">
							<text class="lottery-ts-sx-dd" :class="[`${getClassName(itemSon)}`, `${strLink(itemSon, 'lhc-qlc-lot-')}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]">
								{{ itemSon }}
							</text>
						</block>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) of item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
			</view>
			<!-- 重庆欢乐生肖 -->
			<view class="lotter-t-right" v-if="lotKey == 'ssc'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain ssc-ssc" :class="{ 'small-ball': item.balls.length > 8 }">
					<view><text v-for="(itemSon, index2) in item.balls" :key="index2" class="ssc-ssc-num" :class="[`${strLink(itemSon, 'ssc-ssc--')}`]"></text></view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain  lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain ">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
					</view>
				</view>
			</view>
			<view class="lotter-t-right" v-if="lotKey == 'ssn' || lotKey == 'xyssc' || lotKey == 'ssh' || lotKey == 'ss8' || lotKey == 'f3d' || lotKey == 'pl3' || lotKey == 'sjs'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain ssn-ssh-f3d-pl3-sjs" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<text v-for="(itemSon, index2) in item.balls" :key="index2" class="balls-contain ssn-ssh-f3d-pl3-sjs-num">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain ">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
					</view>
				</view>
			</view>

			<view class="lotter-t-right" v-if="lotKey == 's3s'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<view v-for="(itemSon, index2) in item.balls" :key="index2" class="balls-contain s3s-s3s">
							<image class="s3s-img-img" mode="aspectFit" :src="s3sInt(itemSon)"></image>  
						</view>
					</view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain   lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain ">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
				</view>
			</view>

			<view class="lotter-t-right" v-if="lotKey == 'stj' || lotKey == 'ssg' || lotKey == 'az8'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain stj-ssg" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<text v-for="(itemSon, index2) in item.balls" :key="index2" class="stj-ssg-num balls-contain" :class="[`${strLink(itemSon, 'stj_ssg--')}`]">
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain  lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain ">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
					</view>
				</view>
			</view>

			<view class="lotter-t-right" v-if="lotKey == 'sgx'">
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain sgx-sgx" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<text v-for="(itemSon, index2) in item.balls" :key="index2" class="sgx-sgx-num" :class="[`${strLink(itemSon, 'sgx_sgx--')}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.sum" class="lottery-res-contain   lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
					</view>
				</view>
			</view>

			<!-- 默认开奖结果的样式 -->
			<view
				class="lotter-t-right"
				v-if="
					lotKey != 'lhc' &&
						lotKey != 'qlc' &&
						lotKey != 'ssc' &&
						lotKey != 'ssn' &&
						lotKey != 'xyssc' &&
						lotKey != 'ssh' &&
						lotKey != 'ss8' &&
						lotKey != 'f3d' &&
						lotKey != 'pl3' &&
						lotKey != 'sjs' &&
						lotKey != 's3s' &&
						lotKey != 'stj' &&
						lotKey != 'sgx' &&
						lotKey != 'ssg' &&
						lotKey != 'az8'
				"
			>
				<view v-if="showStateData.balls" class="lottery-res-contain balls-contain" :class="{ 'small-ball': item.balls.length > 8 }">
					<view>
						<view style="display: block;">
							<text v-for="(itemSon, index2) in item.balls" :key="index2" class="pk-num-font" :class="[`${lotnum(itemSon)}`]">{{ itemSon }}</text>
						</view>
						<view v-if="showStateData.balls && showStateData.sum" style="display: block; text-align: left;">
							<text v-for="(itemSon, index2) in item.sum" :key="index2" class="lot-pk-sum">{{ itemSon }}</text>
						</view>
					</view>
				</view>
				<view v-if="showStateData.sum && !showStateData.balls" class="lottery-res-contain   lottery-res-contain-sum">
					<view>
						<text
							v-for="(itemSon, index2) in item.sum"
							:key="index2"
							class="lottery-ts-sx-dd"
							:class="[`${getClassName(itemSon)}`, `${spDAndT(itemSon)}`, { 'tm-len-one': strlenFun(itemSon, '==', 1) }]"
						>
							{{ itemSon }}
						</text>
					</view>
				</view>
				<view v-if="showStateData.nn" class="lottery-res-nn-contain">
					<text v-for="(itemSon, index2) in item.nn" :key="index2">
						<text>{{ itemSon.name }}</text>
						<br />
						<text>{{ itemSon.val }}</text>
					</text>
				</view>
				<view v-if="showStateData.dx" class="lottery-res-contain ">
					<view>
						<text v-for="(itemSon, index2) in item.dx" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.ds" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.ds" :key="index2" class="lottery-sx-dd" :class="[`${getClassName(itemSon)}`]">{{ itemSon }}</text>
					</view>
				</view>
				<view v-if="showStateData.gylh" class="lottery-res-contain">
					<view>
						<text v-for="(itemSon, index2) in item.gylh" :key="index2">{{ itemSon }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 侧滑的菜单 -->
		<view class="wlh-menu" v-if="isShowMenu">
			<view class="w-m-left-mask" @click="hideWlhMenu"></view>
			<view class="w-m-right-content">
				<block v-for="(item, index3) in lots" :key="index3">
					<view class="w-m-type">
						<view class="w-m-type-line"></view>
						<text class="w-m-type-span">{{ item.name }}</text>
					</view>
					<view class="w-m-contain">
						<view class="w-m-c-item" v-for="itemSon in item.value" :key="itemSon.lotteryId" @click="toLotdetail(itemSon.code, itemSon.name, itemSon.lotteryId)">
							{{ itemSon.name }}
							<view class="hot-mark" v-if="itemSon.code == 'pk8' || itemSon.code == 'pt8' || itemSon.code == 'pks' || itemSon.code == 'sg8'">
								<image class="img-img" mode="aspectFit" src="/static/icon/lot_menu_hot.png"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<text class="loading-text">{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}</text>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';

import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: {
		Tabbar,
		navigation
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			lots: [], //侧滑菜单的数据
			isShowMenu: false,
			date: currentDate, //选中后的时间
			selectDate: Tools.getNowFormatDate(), //今日的时间，从本地获取是非常精确
			tabarData: { cycleid: '', sdate: '', balls: '', sum: '', nn: '', dx: '', ds: '', gylh: '', show: '', tm: '' },
			showStateData: {},
			listData: [],
			isRes: false,
			ruleInfo: { content: '', notes_title: '', statement: '' },
			disabled: false, //是否有上拉
			lotType: '',
			tempLotType: '',
			lotKey: '',
			tempLotKey: '', //用于模板中的判断
			tempEventLotKey: '', //是回传过来的值
			isFirst: true,
			page: 1,
			//加载更多的相关属性
			loadingType: 0,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		this.initLotType();
	},
	methods: {
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		/**
		 * 初始化获取类别的第一个数据，返回第一个数据的key
		 */
		initLotType() {
			let tempData = VueTools.getStorageSync(Config.ALL_LOT_STORE_KEY);
			if (Tools.isEmpty(tempData)) {
				this.lotType = '六合彩';
				this.lotKey = 'lhc';
			} else {
				let data = tempData.lots;
				if (data.length <= 0) {
					this.lotType = '六合彩';
					this.lotKey = 'lhc';
				} else {
					this.lotType = data[0].name;
					this.lotKey = data[0].key;
				}
			}
			this.selectDataFun(this.lotKey, this.lotType, this.date, this.page, false);
			console.log('lotType' + this.lotType + '-lotKey' + this.lotKey);
			// if (!ToolService.isEmpty($("app-root").attr("code")) && !ToolService.isEmpty($("app-root").attr("name"))) {
			// this.page = 1;
			// this.selectDataFun($("app-root").attr("code"), $("app-root").attr("name"), this.selectDate.substr(0, 10), 1, "", false);
			// }
			// this.selectDataFun(this.lotKey, this.lotType, this.selectDate.substr(0, 10), this.page, "", false);
		},
		/**
		 * 获取数据
		 * isMore  为ture上拉加载更多
		 */
		selectDataFun(topcode, topTypeName, time, page, isMore = false) {
			let that = this;
			Net.ayiHttp(
				URL.LOTTERY_INDEX,
				'{"topcode":"' + topcode + '","time":"' + time + '","page":"' + page + '","pageSize":"35"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('处理好了的', data);
						let tt = data;
						that.lotKey = topcode;
						that.lotType = topTypeName;
						if (isMore == false && tt.data.length == 0) {
							VueTools.toastNo('暂无开奖结果');
							that.listData = [];
							that.tabarData = { cycleid: '', sdate: '', balls: '', sum: '', nn: '', dx: '', ds: '', gylh: '', show: tt.tabar.show, tm: '' };
							that.isRes = false;
							return;
						}
						that.isRes = true;
						if (!isMore) {
							//下拉或第一次加载
							that.tabarData = tt.tabar;
							that.listData = [];
							that.listData = tt.data;
							that.disabled = false;
							that.initState();
						} else {
							if (tt.data.length > 0) {
								that.listData = that.listData.concat(tt.data);
								that.loadingType = 0;
							} else {
								that.loadingType = 2;
								that.disabled = true;
								VueTools.toastNo('数据已经加载完成');
							}
						}
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
					uni.stopPullDownRefresh();
				},
				function(err) {
					console.log('error:', err);
					uni.stopPullDownRefresh();
				}
			);
		},
		/**
		 * 初始选中的状态值
		 */
		initState() {
			if (this.tabarData.balls) {
				this.showStateFun('balls');
				return;
			} else if (this.tabarData.dx) {
				this.showStateFun('dx');
				return;
			} else if (this.tabarData.ds) {
				this.showStateFun('ds');
				return;
			}
		},
		/**
		 * 筛选的类别
		 * @param type // balls号码,dx大小,ds单双,gylh冠亚/龙虎,sum总和,nn牛牛，
		 */
		onSelectType(type) {
			this.showStateFun(type);
		},
		showStateFun(type) {
			console.log('tempLotKey:' + this.tempLotKey + '-lotKey:' + this.lotKey);
			let temp = this.tempEventLotKey ? this.tempEventLotKey : this.lotKey;
			this.tempLotKey = temp;
			console.log('-----------------当前彩种:', temp);
			switch (type) {
				case 'balls': {
					this.showStateData = { balls: true, sum: false, nn: false, dx: false, ds: false, gylh: false, tm: false };
					break;
				}
				case 'dx': {
					this.showStateData = { balls: false, sum: false, nn: false, dx: true, ds: false, gylh: false, tm: false };
					break;
				}
				case 'ds': {
					this.showStateData = { balls: false, sum: false, nn: false, dx: false, ds: true, gylh: false, tm: false };
					break;
				}
				case 'gylh': {
					this.showStateData = { balls: false, sum: false, nn: false, dx: false, ds: false, gylh: true, tm: false };
					break;
				}
				case 'sum': {
					this.showStateData = { balls: false, sum: true, nn: false, dx: false, ds: false, gylh: false, tm: false };
					break;
				}
				case 'nn': {
					this.showStateData = { balls: false, sum: false, nn: true, dx: false, ds: false, gylh: false, tm: false };
					break;
				}
				case 'tm': {
					this.showStateData = { balls: false, sum: false, nn: false, dx: false, ds: false, gylh: false, tm: true };
					break;
				}
			}
		},
		/**
		 * 获取侧滑的菜单
		 */
		menuNet() {
			let that = this;
			that.isShowMenu = true;
			if (Tools.isEmpty(VueTools.getStorageSync(Config.LOTTER_MENU))) {
				Net.ayiHttp(
					URL.USER_LOTTERY,
					'{}',
					function(res) {
						if (res.code == Config.SUCCESS_CODE) {
							//成功的逻辑
							let data = Tools.aesDecodeToJson(res.data);
							if (!Tools.isEmpty(data)) {
								that.lots = data;
								VueTools.setStorageSync(Config.LOTTER_MENU, data);
							}
						} else if (res.code == Config.FAIL_CODE) {
							VueTools.toastNo(res.message);
						} else if (res.code == Config.LOGIN_CODE) {
							uni.navigateTo({
								url: '/pages/my/login/login'
							});
						}
					},
					function(err) {
						console.log('error:', err);
					}
				);
			} else {
				that.lots = VueTools.getStorageSync(Config.LOTTER_MENU);
			}
		},
		/**
		 * 选中侧滑菜单
		 * @param {String} code 彩种的code值
		 * @param {String} name 彩种的名字
		 * @param {String} lotteryId 彩种的lotterId
		 */
		toLotdetail(code, name, lotteryId) {
			this.isShowMenu = false;
			//todo 加载数据
			this.page = 1;
			if (this.lotType == name) {
				return;
			}
			this.tempEventLotKey = code;
			this.tempLotType = name;
			this.selectDataFun(this.tempEventLotKey, this.tempLotType, this.date, 1, false);
		},
		/**
		 * 隐藏侧滑菜单
		 */
		hideWlhMenu() {
			this.isShowMenu = false;
		},
		lotnum(value) {
			return 'lot-' + (parseInt(value) % 10);
		},
		strLink(val, pre = '', next = '') {
			return pre + val + next;
		},
		strlenFun(value, symbol, val) {
			if (Tools.isEmpty(symbol)) {
				if (value.toString().length >= val) {
					return true;
				}
			} else {
				switch (symbol) {
					case '>':
						{
							if (value.toString().length > val) {
								return true;
							}
						}
						break;
					case '>=':
						{
							if (value.toString().length >= val) {
								return true;
							}
						}
						break;
					case '==':
						{
							if (value.toString().length == val) {
								return true;
							}
						}
						break;
					case '<':
						{
							if (value.toString().length < val) {
								return true;
							}
						}
						break;
					case '<=':
						{
							if (value.toString().length <= val) {
								return true;
							}
						}
						break;
				}
			}
			return false;
		},
		spDAndT(value) {
			if (value == '龙' || value == '龍') {
				return 'lottery-dd-sp';
			} else if (value == '虎') {
				return 'lottery-sx-sp';
			}
		},
		getClassName(value) {
			if (value == '大' || value == '合大' || value == '总和大' || value == '单' || value == '合单' || value == '尾大' || value == '总和单') {
				return 'lottery-dd';
			} else if (value == '小' || value == '合小' || value == '总和小' || value == '双' || value == '合双' || value == '尾小' || value == '总和双') {
				return 'lottery-sx';
			} else if (this.strlenFun(value, '', 2) && !Tools.isNumber(value)) {
				if (value == '尾大') {
					return 'lotter-sum-wei-d';
				} else if (value == '尾小') {
					return 'lotter-sum-wei-x';
				} else if (value == '对子') {
					return 'lotter-sum-dui';
				} else if (value == '杂六') {
					return 'lotter-sum-za';
				} else if (value == '顺子') {
					return 'lotter-sum-sz';
				} else if (value == '半顺') {
					return 'lotter-sum-bsz';
				} else if (value == '豹子') {
					return 'lotter-sum-bao';
				}
				return 'lottery-tslong-sx-dd';
			} else if (this.strlenFun(value, '==', 1) && Tools.isNumber(value)) {
				return 'lottery-tslong-single-sx-dd';
			} else if (this.strlenFun(value, '==', 3) && Tools.isNumber(value)) {
				return 'lottery-tslong-single-sx-dd-one';
			} else if (this.strlenFun(value, '==', 2) && Tools.isNumber(value)) {
				return 'lottery-tslong-single-sx-dd-two';
			} else if (value == '红') {
				return 'lhc-qlc-sum-red';
			} else if (value == '绿') {
				return 'lhc-qlc-sum-green';
			} else if (value == '蓝') {
				return 'lhc-qlc-sum-blue';
			}
		},
		/**
		 * 单独处理江苏快三的结果
		 */
		s3sInt(value){
			return "/static/img/sai0"+parseInt(value)+".png";
		}
	},
	onUnload() {},
	onTabItemTap(option) {
		if (this.$store.state.tabbar_now_index != 0 || this.$store.state.tabbar_now_index != '0') {
			// #ifdef APP-PLUS
			this.Tab.getInstance().show();
			// #endif
			this.$store.commit('setTabbarIndex', option.index);
			uni.$emit('clearMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: true });
			let isLogin = VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY);
			if (!Tools.isEmpty(isLogin) && (isLogin == '1' || isLogin == 1)) {
				console.log('需要去登陆lottery');
				return;
			}
		}
	},
	onReachBottom() {
		if (this.loadingType != 0) {
			return false;
		}
		this.loadingType = 1;
		this.page++;
		this.selectDataFun(this.lotKey, this.lotType, this.date, this.page, true);
	},
	onPullDownRefresh() {
		this.loadingType = 0;
		this.page = 1;
		this.selectDataFun(this.lotKey, this.lotType, this.date, this.page, false);
	}
};
</script>

<style lang="scss">
.lotter-header {
	background: #f1f1f1;
	height: 80rpx;
	border-bottom: 1px solid #a4a4a4;
	padding: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	.lotter-name,
	.lotter-time {
		flex: 1;
		text-align: center;
		color: #666;
		font-weight: 700;
		font-size: 24rpx;
		height: 100%;
		line-height: 80rpx;
	}
	.lotter-name {
		border-right: 1px solid #a4a4a4;
	}
}
.lotter-table-tit {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	.tit-span {
		color: #666;
		padding: 4px;
		margin-right: 2px;
		border: 1px solid #999;
		border-radius: 3px;
		&.active {
			background: #d7d6d6;
		}
	}
}
.lotter-table-item,
.lotter-table-tit {
	display: flex;
	border-bottom: 1px solid #999999;
	font-size: 28rpx;
	.lotter-t-left {
		flex: 1;
		border-right: 1px solid #999999;
		font-weight: bold;
		color: #777777;
		font-size: 24rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.lotter-t-right {
		flex: 3;
	}
}
.lotter-t-right {
	text-align: center;
	padding: 4rpx 0px;
	.lottery-res-contain {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.lhc-qlc-lot {
		display: inline-block;
		height: 44rpx;
		line-height: 44rpx;
		margin-right: 8rpx;
		border-radius: 44rpx !important;
		width: 44rpx;
		text-align: center;
		font-size: 24rpx;
	}
	//六合彩颜色  lhc-qlc-lot
	.lhc-qlc-lot-1,
	.lhc-qlc-lot-2,
	.lhc-qlc-lot-7,
	.lhc-qlc-lot-8,
	.lhc-qlc-lot-01,
	.lhc-qlc-lot-02,
	.lhc-qlc-lot-07,
	.lhc-qlc-lot-08,
	.lhc-qlc-lot-12,
	.lhc-qlc-lot-13,
	.lhc-qlc-lot-18,
	.lhc-qlc-lot-19,
	.lhc-qlc-lot-23,
	.lhc-qlc-lot-24,
	.lhc-qlc-lot-29,
	.lhc-qlc-lot-30,
	.lhc-qlc-lot-34,
	.lhc-qlc-lot-35,
	.lhc-qlc-lot-40,
	.lhc-qlc-lot-45,
	.lhc-qlc-lot-46 {
		background: #ff4040 !important;
		color: #fff !important;
	}
	.lhc-qlc-lot-3,
	.lhc-qlc-lot-4,
	.lhc-qlc-lot-9,
	.lhc-qlc-lot-03,
	.lhc-qlc-lot-04,
	.lhc-qlc-lot-09,
	.lhc-qlc-lot-10,
	.lhc-qlc-lot-14,
	.lhc-qlc-lot-15,
	.lhc-qlc-lot-20,
	.lhc-qlc-lot-25,
	.lhc-qlc-lot-26,
	.lhc-qlc-lot-31,
	.lhc-qlc-lot-36,
	.lhc-qlc-lot-37,
	.lhc-qlc-lot-41,
	.lhc-qlc-lot-42,
	.lhc-qlc-lot-47,
	.lhc-qlc-lot-48 {
		background: #0a92e0 !important;
		color: #fff !important;
	}
	.lhc-qlc-lot-5,
	.lhc-qlc-lot-6,
	.lhc-qlc-lot-05,
	.lhc-qlc-lot-06,
	.lhc-qlc-lot-11,
	.lhc-qlc-lot-16,
	.lhc-qlc-lot-17,
	.lhc-qlc-lot-21,
	.lhc-qlc-lot-22,
	.lhc-qlc-lot-27,
	.lhc-qlc-lot-28,
	.lhc-qlc-lot-32,
	.lhc-qlc-lot-33,
	.lhc-qlc-lot-38,
	.lhc-qlc-lot-39,
	.lhc-qlc-lot-43,
	.lhc-qlc-lot-44,
	.lhc-qlc-lot-49 {
		background: #49ac08 !important;
		color: #fff !important;
	}
	.lhc-qlc-lot-default {
		display: inline-block;
		height: 44rpx;
		line-height: 44rpx;
		margin-right: 8rpx;
		width: 44rpx;
		text-align: center;
		font-size: 24rpx;
	}
	//总和
	.lhc-qlc-sum-num {
		border: solid 1px #777;
		display: inline-block;
		border-radius: 44rpx;
		height: 44rpx;
		width: 108rpx;
		padding: 0px;
		text-align: center;
		line-height: 44rpx;
		margin-right: 8rpx;
	}
	//江苏快三的图
	.s3s-s3s {
		display: inline-block;
		height: 44rpx;
		width: 44rpx;
		line-height: 44rpx;
		margin-right: 8rpx;
		.s3s-img-img{
			width: 48rpx;
			height: 48rpx;
		}
	}
	//广东快乐十分的号码
	.stj-ssg-num,
	.sgx-sgx-num {
		height: 44rpx;
		width: 44rpx;
		line-height: 44rpx;
		border-radius: 44rpx;
		margin-right: 8rpx;
		display: inline-block;
		color: #fff;
	}
	//广东快乐十分的号码颜色
	.stj_ssg--01,
	.stj_ssg--02,
	.stj_ssg--03,
	.stj_ssg--04,
	.stj_ssg--05,
	.stj_ssg--06,
	.stj_ssg--07,
	.stj_ssg--08,
	.stj_ssg--09,
	.stj_ssg--1,
	.stj_ssg--2,
	.stj_ssg--3,
	.stj_ssg--4,
	.stj_ssg--5,
	.stj_ssg--6,
	.stj_ssg--7,
	.stj_ssg--8,
	.stj_ssg--9,
	.stj_ssg--10,
	.stj_ssg--11,
	.stj_ssg--12,
	.stj_ssg--13,
	.stj_ssg--14,
	.stj_ssg--15,
	.stj_ssg--16,
	.stj_ssg--17,
	.stj_ssg--18 {
		background: #0a92e0 !important;
	}
	.stj_ssg--19,
	.stj_ssg--20 {
		background: #ff4040 !important;
	}
	//广西快乐是否号码的颜色样式
	.sgx_sgx--01,
	.sgx_sgx--04,
	.sgx_sgx--07,
	.sgx_sgx--1,
	.sgx_sgx--4,
	.sgx_sgx--7,
	.sgx_sgx--10,
	.sgx_sgx--13,
	.sgx_sgx--16,
	.sgx_sgx--19 {
		background: #ff4040 !important;
	}
	.sgx_sgx--02,
	.sgx_sgx--05,
	.sgx_sgx--08,
	.sgx_sgx--2,
	.sgx_sgx--5,
	.sgx_sgx--8,
	.sgx_sgx--11,
	.sgx_sgx--14,
	.sgx_sgx--17,
	.sgx_sgx--20 {
		background: #0a92e0 !important;
	}
	.sgx_sgx--03,
	.sgx_sgx--06,
	.sgx_sgx--09,
	.sgx_sgx--3,
	.sgx_sgx--6,
	.sgx_sgx--9,
	.sgx_sgx--12,
	.sgx_sgx--15,
	.sgx_sgx--18,
	.sgx_sgx--21 {
		background: #49ac08 !important;
	}
	.lottery-sx-dd {
		//大小单双
		width: 44rpx;
		height: 44rpx;
		border-radius: 6rpx;
		border: 1px solid #777;
	}
	.lhc-qlc-sum-dd,
	.lottery-dd,
	.lottery-dd-sp {
		color: #fff;
		background: #91c0ce;
	}
	.lhc-qlc-sum-sx,
	.lottery-sx,
	.lottery-sx-sp {
		color: #fff;
		background: #a7ce91;
	}
	.lhc-qlc-sum-red {
		color: #fff;
		background: #fc2950;
	}
	.lhc-qlc-sum-green {
		color: #fff;
		background: #52a221;
	}
	.lhc-qlc-sum-blue {
		color: #fff;
		background: #1882d6;
	}
	.lotter-sum-wei-d {
		color: #65b259;
		background: #fff;
	}
	.lotter-sum-wei-x {
		background-color: #fff;
		color: #5385ba;
	}
	.lotter-sum-dui {
		background-color: #fd8c8a;
		color: #fff;
	}
	.lotter-sum-za {
		background-color: #999;
		color: #fff;
	}
	.lotter-sum-sz {
		background-color: #ffbb73;
		color: #fff;
	}
	.lotter-sum-bsz {
		background-color: #c5d049;
		color: #fff;
	}
	.lotter-sum-bao {
		background-color: #e10d2b;
		color: #fff;
	}
	.lot-tshe {
		padding: 12rpx 8rpx !important;
	}
	//重庆欢乐生肖
	.ssc-ssc-num {
		height: 60rpx;
		width: 60rpx;
		display: inline-block;
		&.ssc-ssc--00,
		&.ssc-ssc--0 {
			background: url('/static/img/sx_0.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--01,
		&.ssc-ssc--1 {
			background: url('/static/img/sx_1.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--02,
		&.ssc-ssc--2 {
			background: url('/static/img/sx_2.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--03,
		&.ssc-ssc--3 {
			background: url('/static/img/sx_3.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--04,
		&.ssc-ssc--4 {
			background: url('/static/img/sx_4.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--05,
		&.ssc-ssc--5 {
			background: url('/static/img/sx_5.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--06,
		&.ssc-ssc--6 {
			background: url('/static/img/sx_6.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--07,
		&.ssc-ssc--7 {
			background: url('/static/img/sx_7.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--08,
		&.ssc-ssc--8 {
			background: url('/static/img/sx_8.png') no-repeat;
			background-size: contain;
		}
		&.ssc-ssc--09,
		&.ssc-ssc--9 {
			background: url('/static/img/sx_9.png') no-repeat;
			background-size: contain;
		}
	}
	//pk10系列或者默认
	.pk-num-font {
		display: inline-block;
		font-family: 'impact';
		-webkit-text-stroke: 1px #333;
		text-stroke: 1px #333;
		font-size: 32rpx;
		margin-right: 8rpx;
		border-radius: 6rpx;
		color: #fff;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
	}
	//大小
	.lottery-sx-dd {
		display: inline-block;
		margin-right: 6rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 6rpx;
		border: 1px solid #777;
		font-size: 28rpx;
		font-family: 'impact';
		color: #fff;
	}
	//特码
	.lottery-ts-sx-dd {
		border-radius: 6rpx;
		border: 1px solid #777;
		font-size: 28rpx;
		margin-right: 8rpx;
		height: 44rpx;
		line-height: 44rpx;
		display: inline-block;
		&.lottery-tslong-single-sx-dd,
		&.lottery-tslong-single-sx-dd-two,
		&.tm-len-one {
			width: 44rpx;
			padding: 0rpx;
		}
		&.lottery-dd,
		&.lottery-sx {
			padding: 0rpx;
		}
	}
	//福彩，体彩的数字的背景
	.ssn-ssh-f3d-pl3-sjs-num {
		height: 44rpx;
		width: 44rpx;
		line-height: 44rpx;
		background: url('/static/img/lot_res_bg.png') no-repeat;
		background-size: contain;
		margin-right: 8rpx;
		color: #fff;
		display: inline-block;
	}
}
//侧滑菜单
.wlh-menu {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10001;
	top: 0rpx;
	display: flex;
	flex-direction: row;
	.w-m-left-mask {
		flex: 90;
	}
	.w-m-right-content {
		flex: 260;
		padding: 16rpx;
		background: #f2f3f5;
		.w-m-type {
			padding: 0 16rpx;
			height: 40rpx;
			line-height: 40rpx;
			margin-bottom: 20rpx;
			font-size: 16rpx;
			text-align: center;
			position: relative;
			z-index: 0;
			.w-m-type-line {
				height: 1px;
				background: #e8e9ec;
				position: absolute;
				width: 100%;
				top: 20rpx;
				z-index: -1;
			}
			.w-m-type-span {
				padding: 8rpx 40rpx;
				background: #fff;
			}
		}
		.w-m-contain {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-left: 12rpx;
			.w-m-c-item {
				width: 30%;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #fff;
				border-radius: 4rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				color: #000;
				text-align: center;
				position: relative;
				.hot-mark {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					.img-img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
}
.loading-text {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
</style>
